/**
 * 和1.1版本基本相同，区别是增加了变量
 */
import React from 'react';
import L from 'leaflet';
import tColor from 'tinycolor2';
import { Marker, Popup, Tooltip } from 'react-leaflet';
import { isEmpty } from 'lodash';
import { isLngLat } from 'src/util/mapUtil';
import setting from './setting';
import '../index.less';
import { getValueDefault } from '../commonSetting';

class LBubble extends React.PureComponent {
  static setting = setting;

  constructor(props) {
    super(props);
    const valueDefault = getValueDefault(props);
    if (valueDefault) {
      this.setDataPool(valueDefault);
    }
  }

  // 提示框设置
  get tooltip() {
    const { config: { tooltip } } = this.props;

    return tooltip;
  }

  // 默认设置
  get base() {
    const { config: { default: base } } = this.props;

    return base;
  }

  // 获得经纬度点位数组的value边界
  get valueBound() {
    const { data } = this.props;
    const values = data.map(item => Number(item.value) || 1);
    return {
      valueMax: Math.max(...values),
      valueMin: Math.min(...values)
    };
  }

  // 获得点位大小
  getIconSize = (value) => {
    const { maxSize, minSize } = this.base;

    const { valueMax, valueMin } = this.valueBound;
    if (valueMax === valueMin) return (maxSize + minSize) / 2;

    return Math.floor((maxSize - minSize) * (value - valueMin)
      / (valueMax - valueMin) + minSize);
  };

  getBackground = (color, type) => {
    const bgList = {
      type1: `radial-gradient(circle, ${
        tColor(color).setAlpha(0.9).toRgbString()
      } 1%, ${
        tColor(color).setAlpha(0.6).toRgbString()
      } 30%, ${
        tColor(color).setAlpha(0.3).toRgbString()
      } 61%, ${
        tColor(color).setAlpha(0.1).toRgbString()
      } 80%)`,
      type3: `radial-gradient(${
        tColor(color).setAlpha(1).toRgbString()
      } 1%, ${
        tColor(color).setAlpha(0.8).toRgbString()
      } 20%, ${
        tColor(color).setAlpha(0.1).toRgbString()
      } 30%, ${
        tColor(color).setAlpha(0.6).toRgbString()
      } 70%)`,
      type2: `radial-gradient(${
        tColor(color).setAlpha(0.01).toRgbString()
      } 1%, ${
        tColor(color).setAlpha(0.02).toRgbString()
      } 40%, ${
        tColor(color).setAlpha(0.2).toRgbString()
      } 41%, ${
        tColor(color).setAlpha(0.7).toRgbString()
      } 80%)`
    };
    return bgList[type];
  };

  // 提示框样式
  getTooltipStyle = () => {
    const {
      font, borderColor, borderWidth,
      background: { type, backgroundColor, imageUrl }
    } = this.tooltip;
    const myBackground = type === 'color' ? { backgroundColor } : { backgroundImage: `url(${imageUrl})` };

    return {
      border: `${borderWidth}px solid ${borderColor}`,
      ...myBackground,
      ...font
    };
  };

  // 获得提示框文本
  getTooltipContext = (text) => {
    const infoArray = `${text}`.split(';');
    return (<section
      className="map-marker-content"
      style={this.getTooltipStyle()}
    >
      {infoArray.map((item, idx) =>
        (<React.Fragment key={`line${idx}`}>
          {item}
          <br />
        </React.Fragment>))
      }
    </section>);
  };

  // 更新store中的dataPoll
  setDataPool(dataPoll) {
    // eslint-disable-next-line
    if (!this.props.events) return;
    const {
      bigScreen: { setDataPool }, editable,
      events: { click },
      path
    } = this.props;
    setDataPool(click, dataPoll, path, editable);
  }

  getMarkers = (data, index) => {
    const {
      lng, lat, value, tooltip, info = ''
    } = data;
    // 交互功能
    const { events } = this.props;
    const { show } = this.tooltip;
    const { color, type } = this.base;
    const background = this.getBackground(color, type);
    const size = this.getIconSize(Number(value));

    const redMarker = L.divIcon({
      className: 'noBackground',
      html: `<div style="background:${background}; width: ${size}px; height: ${size}px;" class="bubble"></div>`,
      iconAnchor: [size / 2, size / 2],
    });

    return (
      <Marker
        onClick={() => {
          if (events && events.click.action.active) {
            this.setDataPool({ info, lng, lat });
          }
        }}
        position={[lat, lng]}
        icon={redMarker}
        key={index}>
        {(tooltip && show === 'click')
        && <Popup
          position={[lat, lng]}
          className="marker-popup"
          closeButton={false}
          autoPanPaddingTopLeft={[0, -10]}
        >
          {this.getTooltipContext(tooltip)}
        </Popup>}
        {tooltip && (show === 'always' || show === 'hover')
        && <Tooltip
          direction="top"
          key={Math.floor(Math.random() * 1000)}
          permanent={show === 'always'}
          className="marker-tooltip"
          offset={[0, -10]}
        >
          {this.getTooltipContext(tooltip)}
        </Tooltip>}
      </Marker>
    );
  };


  render() {
    const { data } = this.props;
    if (isEmpty(data)) return null;

    return (
      <React.Fragment>
        {data.filter(({ lng, lat }) => isLngLat(lng, lat))
          .map((item, index) =>
            this.getMarkers(item, index))}
      </React.Fragment>
    );
  }
}
// LBubble.setting = setting;
export default LBubble;
